
(function ( $, window, document) {
  var pluginName = "MySliderImage",
  //默认配置参数  default settings
    defaults = {
        speed:600,    //切换的速度 slide speed
        autoSlide:true,    //是否主动滑动 slide automatically
        delay:4000,      //图片切换停留时间 
        effect: 'silde', //切换效果
        changeImage:function(element,index){}, //点击图片时回调函数,参数：element：图片元素，index：图片在图片数组中的序号
    };

    function Plugin ( element,options ) {
	    this.element = element;
	    this.settings = $.extend( {}, defaults, options );
	    this._defaults = defaults;
	    this._name = pluginName;
	    this.init();
	};

	Plugin.prototype = {
		init: function() {//初始化
			var e = this;
			e.width = $(e.element).width();
			e.height = $(e.element).height();
			e.timer;
			e.setImg();
		},
		setImg: function() {
			var e = this;
			e.index = 0;//索引位置
			var ul_Obj = $(e.element).find(".slider_wrapper");//容器滚动层
			var li_Obj = ul_Obj.find('.slider_item');//图片元素容器组
			e.li_len = li_Obj.length+1;//长度要克隆一个所以+1
			var ul_width = e.width*e.li_len;//计算设置宽
			ul_Obj.css('width',ul_width);
			li_Obj.css('width',e.width);
			var _doctBox = $(e.element).find(".slider_indicators");//指示器的容器
			for (var j = 0; j < li_Obj.length; j++) {   //创建圆点
				_doctBox.append('<span class="docts"></span>')
			}
			var _doct = $(e.element).find(".slider_indicators .docts");//指示器
			_doct.first().addClass('active');  //给第一个圆点添加样式
			
			if(e.settings.effect=='fade'){
				li_Obj.each(function(index) {
					if(index ===0){
						$(this).css({'position':'relative',left:-index*e.width,'opacity':'1','z-index': '1','transition': 'opacity '+e.settings.speed+'ms ease-in-out'});
					}else {
						$(this).css({'position':'relative',left:-index*e.width,'opacity':'0','z-index': '0','transition': 'opacity '+e.settings.speed+'ms ease-in-out'});
					}
				});
			}
			var firstimg = li_Obj.first().clone(); //复制第一张图片
			ul_Obj.append(firstimg).width(ul_width);  //将第一张图片放到最后一张图片后，设置ul的宽度为图片张数*图片宽度
			// 下一个按钮
			$(e.element).find(".slider_control .next").click(function(){
				e.index ++;
				if(e.index == e.li_len){
					$(e.element).find(".slider_wrapper").css({left:0});
					e.index = 1;
				}
				e.showImg(e.index);
			});
			// 上一个按钮
			$(e.element).find(".slider_control .prev").click(function(){
				e.index --;
				if (e.index == -1) {
					if(e.settings.effect=='fade'){

					}else {
						$(e.element).find(".slider_wrapper").css({left:-(e.li_len-1)*e.width});
					}
					e.index = e.li_len-2;
				}
				e.showImg(e.index);
			})
			//鼠标划入圆点
			_doct.mouseover(function(){
				e.index = $(this).index();
				e.showImg(e.index);
			})
			//定时器自动播放
			if(e.settings.autoSlide){//是否自动轮播
				$(e.element).hover(function(){  
					clearInterval(e.timer);
					$(e.element).find('.slider_control').show();
				},function(){
					e.timer =setInterval(function(){
						e.index ++;
						if(e.index == e.li_len){
							$(e.element).find(".slider_wrapper").css({left:0});
							e.index = 1;
						}
						e.showImg(e.index);
					},e.settings.delay);
					$(e.element).find('.slider_control').hide();
				}).trigger("mouseleave");
			}
			
		},
		showImg: function(index) {//显示图片
			var e = this;
			var _left = -index*e.width;
			if(e.settings.effect=='fade'){
				if(index==e.li_len-1){
					$(e.element).find(".slider_wrapper .slider_item").eq(0).css({'opacity':'1','z-index':'1'}).siblings().css({'opacity':'0','z-index':'0'});;
				}else {
					$(e.element).find(".slider_wrapper .slider_item").eq(index).css({'opacity':'1','z-index':'1'}).siblings().css({'opacity':'0','z-index':'0'});
				}
			}else {
				$(e.element).find(".slider_wrapper").stop().animate({left:_left},e.settings.speed);
			}
			if(index==e.li_len-1){
				$(e.element).find(".slider_indicators .docts").eq(0).addClass('active').siblings().removeClass('active');
				e.settings.changeImage(this,0);
			}else {
				$(e.element).find(".slider_indicators .docts").eq(index).addClass('active').siblings().removeClass('active');
				e.settings.changeImage(this,index);
			}
			
		},
	};

    $.fn[ pluginName ] = function (options) {   //向jQuery注册插件
        var e = this;
        e.each(function() {
            $.data( e, "plugin_" + pluginName, new Plugin( this,options ) );
        });
        return e;
    };
})(jQuery, window, document);